<template>
    <div class="page">
        <div class="row">
            <h1 style="text-align:center;padding:2mm;margin-bottom: 0px;">欢迎光临</h1>
            <h2 style="text-align:center;margin-top: 0px;">{{sinfo.name}}</h2>
        </div>
        <div class="row">
            <p>客户姓名：{{oinfo.name}} </p>
            <p>客户卡号：{{oinfo.vipcard}} </p>
            <p>充值余额剩余：{{oinfo.yue}}元 </p>
            <p>赠送余额剩余：{{oinfo.zsyue}}元 </p>
            <p>&nbsp;&nbsp;</p>
            <p>单号：{{oinfo.order_sn}} </p>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;"></p>
        <div class="row">
            <table>
                <thead>
                    <tr>
                        <th style="width:50%">名称</th>
                        <th style="width:20%">充值金额</th>
                        <th style="width:15%">数量</th>
                        <th style="width:15%">类型</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(opt,key) in cinfo">
                        <td style="width:50%">{{opt.typename}}</td>
                        <td style="width:20%">{{opt.price}}</td>
                        <td style="width:15%">{{opt.type
                            < 4?opt.num: ''}}</td>
                                <td style="width:15%" v-if="opt.isgift">赠</td>
                                <td style="width:15%" v-else></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td style="width:50%">小计</td>
                        <td style="width:50%">{{counts.amount}}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>实收现金：{{Number(oinfo.recemoney).toFixed(2)}}元</p>
            <p>&nbsp;&nbsp;</p>
            <p>下单时间：{{oinfo.addtime|hourTime}}</p>
            <p>打印时间：{{new Date()/1000|hourTime}}</p>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>电话：{{sinfo.phone}}</p>
            <p>地址：{{sinfo.address}}</p>
            <p>&nbsp;&nbsp;</p>
            <p style="text-align:center">欢迎光临！谢谢惠顾 </p>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'

export default {
  name: 'printRechargeOrder',
  data () {
    return {
      oinfo: {},
      cinfo: [],
      sinfo: {},
      id: ''
    }
  },
  methods: {
    async getmsg () {
      let res = await C.ajax('/shop/print/getorderlistinfo', { 'id': this.id }, 'post')
      if (res) {
        this.oinfo = res.oinfo
        this.cinfo = res.olist
        this.sinfo = res.sinfo
      }
    },
    contextMenu () {
      const ipc = require('electron').ipcRenderer
      const { remote } = require('electron')
      const { Menu, MenuItem } = remote
      const menu = new Menu()
      menu.append(new MenuItem({ label: '直接打印', click () { ipc.send('print-now') } }))
      menu.append(new MenuItem({ type: 'separator' }))
      menu.append(new MenuItem({ label: '打印预览', click () { ipc.send('print-to-pdf') } }))
      window.addEventListener('contextmenu', (e) => {
        e.preventDefault()
        menu.popup(remote.getCurrentWindow())
      }, false)
    }
  },
  computed: {
    counts: function () {
      var d = { num: 0, amount: 0 }
      for (var i = this.cinfo.length - 1; i >= 0; i--) {
        d.num += this.cinfo[i].num
        d.amount += this.cinfo[i].amount
      }
      return d
    }
  },
  mounted: function () {
    this.id = C.getDatas().id
    this.getmsg()
    this.contextMenu()
  }
}
</script>
<style>
p {
    margin: 0px;
}

* {
    box-sizing: border-box;
}

.row {
    padding: 0px 1mm;
}

.page {
    background: white;
    color: #000;
    display: flex;
    flex-direction: column;
    font: 2.8mm "Arial";
    padding: 0;
    margin: 0;
}

.content {
    border: none;
}

@page {
    margin: 0;
}

@media print {
    body {
        width: 45.3mm !important;
        height: auto !important;
        margin: 0;
        padding: 0;
        background: white;
    }

    .header{display: none}
}

th {
    text-align: left;
    margin: 0px;
    padding: 0px;
}

td {
    margin: 0px;
    padding: 0px
}

tr{
    display: flex
}

table{
    width: 100%
}
</style>